<template>
	<view>
		<view style="border-radius: 24upx;border:1upx solid #f3f3f3;padding: 24upx;margin: 24upx;">
			<view style="display: flex;flex-direction: row;margin-bottom: 10upx;">
				<view style="flex: 1;">
					<view style="color: #4b4b4b;font-size: 24upx;line-height: 36upx;">{{name}}</view>
					<view style="color: #ababab;font-size: 24upx;line-height: 36upx;margin-top: 10upx;">有效期至:{{expireTime}}</view>
				</view>
				<view>
					<view style="padding: 0 5upx;background: #9ba1b8;font-size: 18upx;border-radius: 8upx;text-align: center;color: #ffffff;line-height: 36upx;">剩余{{expireCount}}次</view>
					<view style="color: #ababab;font-size: 24upx;line-height: 36upx;margin-top: 10upx;">￥{{price}}</view>
				</view>
			</view>
			<view style="border-top: 1upx solid #f3f3f3;padding-top: 24upx;text-align: center;">使用记录</view>
			<view style="border-radius: 24upx;border:1upx solid #e4e4e4;padding: 24upx;font-size: 24upx;color: #bdbdbd;line-height: 36upx;margin-top: 24upx;" v-for="(item,key) in records" :key="key">
				<view style="color: #5a5d6a;">{{item.service_name}}</view>
				<view>服务管家：{{item.staff_name}}</view>
				<view>服务时间：{{item.pay_time==0?'待服务':item.pay_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				card_item_id:0,
				name:"",
				expireTime:"",
				expireCount:"",
				price:"",
				records:[],
			}
		},
		onLoad:function(e){
			this.card_item_id=e.id;
			this.getData();
		},
		methods: {
			getData:function(){
				var that = this;
				that.ajax("/user/card_pay",{
					token:uni.getStorageSync("token"),
					card_item_id:this.card_item_id,
				},function(res){
					that.name=res.data.data.info.name;
					that.expireTime=res.data.data.info.expire_time;
					that.expireCount=res.data.data.info.expire_count;
					that.price=res.data.data.info.price;
					that.records = res.data.data.records;
				});
			}
		}
	}
</script>

<style>

</style>
